<template>
    <div class="wrapper">
        <div class="sMain">
            <img src="http://assets.rurushishi.com/activies/hcAct/shake1.png" alt="">
            <div class="sPhone" @click="toastDemo">
                <img src="http://assets.rurushishi.com/activies/hcAct/phones.png" alt="">
            </div>
            <!-- <div class="sLogo">
                <img src="http://assets.rurushishi.com/activies/hcAct/2019.png" alt="">
            </div> -->
        </div>
        <div class="return" @click="ret">
            <img src="http://assets.rurushishi.com/activies/hcAct/returnBtn.png" alt="">
        </div>
        <div class="botText">本活动由原圈网络提供技术支持</div>
        <share :isshare="isshare"></share>
    </div>
</template>
<script>
    import {MessageBox} from "mint-ui";
    import request from "@/utils/request";
    import {mapState, mapMutations} from "vuex";
    // import wxsdk from "@/utils/wxsdk";
    import Cookies from "js-cookie";
    import * as config from "./config";
    import Shake from "shake.js";
    import wx from "weixin-js-sdk";
    import Share from "@/components/common/Sharehc";

    export default {
        data() {
            return {
                shakeCounts: 2,
                DrawAudio: null,
                isshare: this.$route.query.isShare ? this.$route.query.isShare : false,
                isAward: false,
                loading: false,
                myShakeEvent: null,
                code: '',
                reOpenid: this.$route.query.reOpenid ? this.$route.query.reOpenid : '',
                openid: Cookies.get("openid")
            };
        },
        components: {
            share: Share
        },
        computed: {
            ...mapState(["info", "channel"])
        },
        created() {
            this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
//        this.channel=this.$route.query.channel ? this.$route.query.channel : 0;
            this.reOpenid = this.$route.query.reOpenid ? this.$route.query.reOpenid : '';
            if (!this.info.mobile) {
                request
                    .get(this.global.API_URL, {
                        action: "/activity/relay/RelayAction/getActUserInfo",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            referenceopenid: ""
                        }
                    })
                    .then(response => {
                        this.setInfo(response.obj);
                        this.checkAward();
                        if (this.info && this.info.nickname && this.info.nickname != '') {
                            this.global.SHARE_TITLE = "大力士【" + this.info.nickname + "】摇中大礼，测测你的臂力"
                        }
                        this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/hcact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
                    });
            } else {
                this.checkAward();
                this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/hcact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
            }


        },
        methods: {
            toastDemo() {
                // toastPlugin('你好，npm package')
            },
            ret() {
                this.$router.push({path: '/index', query: {channel: this.channel,reOpenid:this.reOpenid}});
            },
            shakeEventDidOccur() {
                let _self = this;
                window.ConfigAudio.play();
                if (_self.shakeCounts == 2) {
                    _self.shakeCounts--;
                    MessageBox.alert("再用力点！", "提示")
                    return;
                }
                _self.loading = true;
//        if( _self.shakeCounts==1&&!_self.isAward){
                if (_self.shakeCounts == 1 && !_self.isAward && _self.loading) {
                    request
                        .get(this.global.API_URL, {
                            action: "/activity/relay/RelayAction/takePrizeCode",
                            requestParam: {
                                actcode: config.ACT_CODE
                            }
                        })
                        .then(response => {
                            if (response.obj) {
//                        this.$router.push("/info?code"+response.obj);
                                _self.code = response.obj;
                                if (_self.code == '') {
                                    MessageBox.alert("再用力点！", "提示")
                                    return
                                }
                                MessageBox.alert("恭喜您，动动小手，" + (_self.code === 'prize_2' ? "话费" : "百草味年货礼包") + "带走！", "提示").then(
                                    () => {
                                        if (_self.info && _self.info.mobile) {
                                            _self.loading = false;
                                            _self.myShakeEvent.stop();
                                            _self.$router.push({
                                                path: "/info",
                                                query: {
                                                    code: _self.code,
                                                    channel: _self.channel,
                                                    mobile: _self.info.mobile,
                                                    name: _self.info.name,
                                                    reOpenid: _self.reOpenid
                                                }
                                            });
//                                    request
//                                        .get(_self.global.API_URL, {
//                                            action: "/activity/relay/RelayAction/getZHPrize",
//                                            requestParam: {
//                                                actcode: config.ACT_CODE,
//                                                prizecode: _self.code
//                                            }
//                                        })
//                                        .then(response => {
//                                            if (response.obj == 1) {
//                                                if(_self.code = 'prize_3'){
//                                                    MessageBox.alert("恭喜您获得新年礼包！", "提示").then(
//                                                        () => {
//                                                            _self.isshare=true;
//                                                        }
//                                                    );
//                                                }else{
//                                                    MessageBox.alert("恭喜您获得话费2-100元！", "提示").then(
//                                                        () => {
//                                                            _self.isshare=true;
//                                                        }
//                                                    );
//                                                }
//                                            }
//                                        });
                                        }
                                        else {
                                            _self.loading = false;
                                            _self.myShakeEvent.stop();
                                            _self.$router.push({
                                                path: "/info",
                                                query: {code: _self.code, channel: _self.channel,reOpenid: _self.reOpenid}
                                            });
                                        }
                                    }
                                );

                            }else {
                                MessageBox.alert("感谢您的参与，来年更摇摆～   您还需要继续努力哦。", "提示")
                            }
                        });
                } else if (_self.isAward) {
                    MessageBox.alert("您已经领过奖了！", "提示")
                } else {
                    MessageBox.alert("再来一次，精美大奖等你哦！", "提示")
                }

                // myShakeEvent.stop();
                if (window.navigator.vibrate) {
                    navigator.vibrate(500);
                }

//      _self.shakeCounts --;
            },
            checkAward() {
                //获取是否领过奖
                request
                    .get(this.global.API_URL, {
                        action: "/activity/relay/RelayAction/getUserPrize",
                        requestParam: {
                            actcode: config.ACT_CODE
                        }
                    })
                    .then(response => {
                        this.isAward = config.checkaward(response.obj, this.code);
                    });
            },
            ...mapMutations({
                setInfo: "SET_INFO",
                setChannel: "SET_CHANNEL"
            })
            //            shackbtn (){
            //                this.$router.push("/homepage/ltpl");
            //            }

        },
        mounted() {

            if (!window.ConfigAudio) {
                window.ConfigAudio = new Audio()
                window.ConfigAudio.src = 'http://assets.rurushishi.com/activies/mfAct/blank.mp3';
                wx.ready(function () {
                    window.ConfigAudio.play();
                    window.ConfigAudio.src = "http://assets.rurushishi.com/activies/mfAct/1.mp3";
                });
            } else {
                window.ConfigAudio.src = 'http://assets.rurushishi.com/activies/mfAct/blank.mp3';
                wx.ready(function () {
                    window.ConfigAudio.play();
                    window.ConfigAudio.src = "http://assets.rurushishi.com/activies/mfAct/1.mp3";
                });
            }
            this.myShakeEvent = new Shake({
                threshold: 10, // optional shake strength threshold
                timeout: 3000 // optional, determines the frequency of event generation
            });
            this.myShakeEvent.start();
            window.addEventListener("shake", this.shakeEventDidOccur, false);
            let _self = this;
            this.global.SHARE_CALLBACK_OK = function (type) {
                request
                    .get(_self.global.API_URL, {
                        action: "/activity/relay/RelayAction/share",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            groupcode: config.ACT_CODE,
                            prizecode: 'prize_1',
                            channel: _self.channel,
                            referenceopenid: _self.reOpenid
                        }
                    })
                    .then(response => {

                    });
            };

            config.initShare();


        }
    };
</script>
<style lang="stylus" scoped>
    @import '~@/assets/styles/mixins.styl';
    .wrapper {
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: url('http://assets.rurushishi.com/activies/hcAct/bg3.jpg') repeat center center;
        background-size: 100% 100%;
    }

    .sMain {
        position absolute
        top: 1.8rem
        left 20%
        width: 60%
    }

    .sMain > img {
        width: 100%
        height: 100%
    }

    .sPhone {
        position: absolute;
        top: 19%;
        left: 15%;
        width: 70%;
    }

    .sPhone > img {
        transform-origin: 50% 100%;
        animation: shake .5s infinite;
        width: 100%
        height: 100%
    }

    .sLogo {
        position absolute
        top: 75%
        width: 40%
        left: 30%
    }

    .sLogo > img {
        width: 100%
        height: 100%
    }

    @keyframes shake {
        0% {
            transform: rotate(-10deg);
        }
        25% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(10deg);
        }
        75% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-10deg);
        }
    }

    .return {
        position absolute
        top: 1rem
        left 0
        width: 2rem
    }

    .return > img {
        width: 100%
        height: 100%
    }
    .botText{
        position fixed
        width 100%
        background-color #000
        opacity .7
        color #fff
        font-size .24rem
        text-align center
        line-height .5rem
        bottom 0
        left 0
    }
</style>
